<template>
  <div class="main-register">
     <!-- <so-header :seller="headerTitle"></so-header> -->
      <setHeader title="注册用户" ></setHeader>

      <div class="content y-register main-register" style="margin-bottom: 0;">
          <!-- 账号密码输入框 -->
          <mt-field class="mint-user-cell" @focus.native.capture="phoneFocus" @blur.native.capture="phoneBlur" placeholder="请输入手机号码" type="phone" :attr="{ maxlength: 11 }" v-model="ruleForm2.username" ref="ruleForm1"></mt-field>
          <mt-field class="mint-user-cell" @focus.native.capture="passFocus" @blur.native.capture="passBlur" placeholder="请输入密码(英文数字结合,长度在6-16位)" type="password" :attr="{ minlength: 6 }" v-model="ruleForm2.password" ref="ruleForm2"> 
          <!--  <mt-button>
            <img src="../common/images/logo3.png" height="20" width="20" slot="icon">
          </mt-button> -->
          <!-- <div><img src="/static/img/eye2.5672b73.png" class="y-ShowPassword" slot="icon"></div> -->
          </mt-field>
          <mt-field class="mint-user-cell" label="" v-model="captcha" placeholder="请输入验证码" @focus.native.capture="smsFocus" @blur.native.capture="smsBlur" ref="ruleForm3">
            <mt-button type="danger" class="y-code-btn" v-on:click="sendSMS">获取验证码</mt-button>
          </mt-field>
          <div class="y-text-top">
            <span class="text NoGetCode" style="float:right; color:#E50838; font-size: 14px;"><router-link to="">收不到验证码？</router-link></span>
          </div>
      

          <mt-button  size="large" class="el-long-button el-long-create-button el-long-user-button y-btn-red" v-on:click="handleSubmit2">注册</mt-button>
          <div class="y-agreement">
            <span>注册代表你已同意</span>
            <span @click="agreementBtn">《友圈用户协议》</span>
          </div>
      </div>
      <!-- 用户协议及隐私政策 的 提示框 -->
      <div class="mint-msgbox-wrapper" style="position: absolute; z-index: 2011;" v-if="msgboxAgreementFlag">
        <div class="mint-msgbox y-agreement-msgbox"  >
          <div class="mint-msgbox-header  y-agreement-header">
            <div class="mint-msgbox-title y-agreement-title">用户协议及隐私政策</div>
          </div> 
          <div class="mint-msgbox-content y-agreement-content">
              <div class="mint-msgbox-message y-agreement-message">
                <p>1.本应用尊重并保护使用服务用户的个人隐私权。</p>
                <p>2.为了给您提供更准确、更有个性化的服务，本应用会按照本隐私权政策的规定使用和披露您的个人信息。但本应用将以高度的勤勉、审慎义务对待这些信息。</p>
                <p>3.除本隐私权政策另有规定外，在未征得您事先许可的情况下，本应用不会将这些信息对外披露或向第三方提供。本应用会不时更新本隐私权政策。 您在同意本应用服务使用协议之时，即视为您已经同意本隐私权政策全部内容。本隐私权政策属于本应用服务使用协链接！</p>
              </div> 
              <div class="mint-msgbox-input" style="display: none;">
                <input placeholder="" type="text"> 
                <div class="mint-msgbox-errormsg" style="visibility: hidden;"></div>
              </div>
          </div> 
          <div class="mint-msgbox-btns y-agreement-btns">
              <button class="mint-msgbox-btn mint-msgbox-cancel" style=""  @click="msgboxAgreementFlag=false">拒绝</button>
              <button class="mint-msgbox-btn mint-msgbox-confirm">同意</button>
          </div>
        </div>
      </div>
        <!-- 遮罩层 -->
      <div class="v-modal" @click="msgboxAgreementFlag=false"  style="width:100%;height:100%;background-color:#000; z-index: 10;" v-if="msgboxAgreementFlag"></div>

  </div>
  

</template>

<script>
  import setHeader from '../public/setHeader.vue';
  import { Button } from 'mint-ui';
  import { MessageBox } from 'mint-ui';
  import qs from 'qs';
  import store from '../store/index';
  export default {
    data() {
      return {
        headerTitle:'注册用户',
        msgboxAgreementFlag:false,
        logining: false,
        ruleForm2: {
          username: '',
          password: '',      
        },
        captcha:'',
        // rules2: {
        //   account: [
        //     { required: true, message: '请输入账号', trigger: 'blur' },
        //     //{ validator: validaePass }
        //   ],
        //   checkPass: [
        //     { required: true, message: '请输入密码', trigger: 'blur' },
        //     //{ validator: validaePass2 }
        //   ]
        // },
        checked: true
      };
    },
    components: {
    	setHeader,
      Button
    },
     mounted(){
      store.commit('setPage', 1);//设置需要预请求的参数
      
      this.$nextTick(() => {
        // 这里调用
        this.phoneFocus();
        this.smsFocus();
        this.passFocus();
        this.phoneBlur();
        this.passBlur();
        this.smsBlur();
      })
      
    },
    methods: {
      // 手机号聚焦
      phoneFocus() {
        var ruleForm1 =this.$refs["ruleForm1"].$el;
        ruleForm1.style.borderBottom = "1px solid #e50838";
      },
      phoneBlur() {
        var ruleForm1 =this.$refs["ruleForm1"].$el;
        ruleForm1.style.borderBottom = "1px solid #d8d8d8";
      },
      // 密码聚焦
      passFocus() {
        var ruleForm2 =this.$refs["ruleForm2"].$el;
        ruleForm2.style.borderBottom = "1px solid #e50838";
      },
      passBlur() {
        var ruleForm2 =this.$refs["ruleForm2"].$el;
        ruleForm2.style.borderBottom = "1px solid #d8d8d8";
      },
      // 验证码聚焦
      smsFocus() {
        var ruleForm3 =this.$refs["ruleForm3"].$el;
        ruleForm3.style.borderBottom = "1px solid #e50838";
      },
      smsBlur() {
        var ruleForm3 =this.$refs["ruleForm3"].$el;
        ruleForm3.style.borderBottom = "1px solid #d8d8d8";
      },


      handleReset2() {
        this.$refs.ruleForm2.resetFields();
      },
      handleSubmit2() {
        var _this = this;

        if (_this.ruleForm2.username == "") {
          _this.$openTips({
            text: "手机号码不能为空",
            time:2000
          });
          return;
        }

        if (!/^1[3456789]\d{9}$/.test(_this.ruleForm2.username)) {
          _this.$openTips({
            text: "电话号码格式错误",
            time:2000
          });
          return;
        }

        if (_this.ruleForm2.password == "") {
          _this.$openTips({
            text: "密码不能为空",
            time:2000
          });
          return;
        }

        if (_this.captcha == "") {
          _this.$openTips({
            text: "验证码不能为空",
            time:2000
          });
          return;
        }

        if(!_this.captcha || _this.getCookie('register') != _this.captcha){
           _this.$openTips({
                text:'请输入正确的验证码',
                time:2000
            });

           return false;
        } 

        if(_this.getCookie('register') == _this.captcha && _this.captcha != ''){ 
          this.$post(this.$path + '/api.php/api/register',this.ruleForm2).then((response) => {
             if(response.code == 200){ 

                  //清理多次登录问题
                  if(window.localStorage.getItem('token') !=  null){
                    localStorage.removeItem("token");
                  }

                  if(window.localStorage.getItem('timer') !=  null){
                    localStorage.removeItem("timer");
                  }

                  if(window.localStorage.getItem('user')  !=  null){
                    localStorage.removeItem("user");
                  }

                  window.localStorage.setItem('access_token',response.data.access_token);
                  window.localStorage.setItem('timer', Date.now());
                
                _this.$openDialog({
                  src: require('../common/images/UI-10.png'),
                  title: '欢迎您',
                  message: '为了更好的使用本平台',
                  messagemore: '您需要绑定您目前就职或创办的企业',
                  okText: '立即绑定',
                  cancelText: '稍后绑定',
                  callback (flag) {
                    if(flag) {
                      _this.$router.push({path:'/companyCreate'});
                    }else {
                      _this.$router.push({path:'/userCenter'});
                    }     
                  }
                });
              }else{ 
                this.$openTips({
                  text:response.msg,
                  time:2000
                });
              }
              
          })
        }
        // else{ 
        //     this.$openTips({
        //         text:'验证码错误',
        //         time:2000
        //     });
        // }
        
      },
      sendSMS(){ 
        if (this.ruleForm2.username == "") {
          this.$openTips({
            text: "手机号码不能为空",
            time:2000
          });
          return;
        }

        if (!/^1[3456789]\d{9}$/.test(this.ruleForm2.username)) {
          this.$openTips({
            text: "电话号码格式错误",
            time:2000
          });
          return;
        }
        

       this.clearCookie('register');
         let code = "";    
         var codeLength = 4;//验证码的长度   
         var random = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R',   
                     'S','T','U','V','W','X','Y','Z');//随机数   
         for(var i = 0; i < codeLength; i++) {
               //循环操作   
               var index = Math.floor(Math.random()*36);//取得随机数的索引（0~35）   
               code += random[index];//根据索引取得随机数加到code上   
         }   
              console.log(code);

        this.setCookie('register',code);
        this.$openTips({
          text:'验证码'+this.getCookie('register'),
          time:3000
        });

        // alert('验证码:'+this.getCookie('cookie'));
      },
       //设置cookie
      setCookie: function (cname, cvalue, exdays) {
        var d = new Date();
        d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
        var expires = "expires=" + d.toUTCString();
        console.info(cname + "=" + cvalue + "; " + expires);
        document.cookie = cname + "=" + cvalue + "; " + expires;
        console.info(document.cookie);
      },
      //获取cookie
      getCookie: function (cname) {
        var name = cname + "=";
        var ca = document.cookie.split(';');
        // console.log("获取cookie,现在循环")
        for (var i = 0; i < ca.length; i++) {
          var c = ca[i];
          console.log(c)
          while (c.charAt(0) == ' ') c = c.substring(1);
          if (c.indexOf(name) != -1){
            return c.substring(name.length, c.length);
          }
        }
        return "";
      },
      //清除cookie
      clearCookie: function () {
        this.setCookie("username", "", -1);
      },
      checkCookie: function () {
        var user = this.getCookie("username");
        if (user != "") {
          alert("Welcome again " + user);
        } else {
          user = prompt("Please enter your name:", "");
          if (user != "" && user != null) {
            this.setCookie("username", user, 365);
          }
        }
      },
      // 用户协议及隐私政策
      agreementBtn:function(){
        console.log('222')
        this.msgboxAgreementFlag=true
        // this.$refs.box1.style.background="black";
        
      },

    }
  }

</script>
<style  >

/* 头部导航颜色 */
.main-register .header_array_text_white {
  background-color: #fff;
  color: #000;
}
.main-register .header_array_text_white .title_white {
  color: #333;
}
/* 找不到密码 */
.main-register .y-text-top{
  margin-top: 0.2rem ;
  padding-bottom: 0.1rem;
}

.y-text-top .NoGetCode a{
  color: #c6c6c6 !important;
  font-size:  0.22rem !important;
}


/* .el-long-create-button{
	margin-top:50px !important;
} */
.mint-user-cell{
    /* border-bottom: #d2d2d2 solid 1px !important; */
    height: 1rem !important;
}
.el-long-user-button{
	width:100% !important;
	
}
.y-register .mint-user-cell{
    /* border-bottom: #d2d2d2 solid 1px !important; */
    height: 1rem;
}
/* .is-right{
  opacity: 0;
} */

.mint-msgbox-header{
  padding: 0 ;
}
/* .mint-header{
  background-color: transparent !important;
}
.mint-header-title{
  overflow: visible ;
   color: #333333 ;
   font-size: 0.36rem ;
    font-family:SourceHanSansCN-Medium;
    font-weight:500;
    color:rgba(51,51,51,1);
    line-height: 0.36rem ;
}
a:-webkit-any-link{
  color:  #333333 ;
  font-size: 0.36rem ;
} */
.y-reset .mint-field-core{
  font-size: 0.28rem;
}
.y-text-top{
  margin-top: 0.2rem ;
  /* margin-bottom: 0.48rem ; */
}
.main-register .mint-cell-value{
   margin-right: 0; 
   padding: 0;
}
.main-register .mint-field {
  padding: 0;
}

.NoGetCode a{
  color: #E50838 !important;
  font-size:  0.22rem !important;
}
.y-btn-red{
  margin-top: 0.9rem !important;
}
/*返回按钮*/
/* .mint-header .mint-button {
    background-color: transparent;
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: inherit;
    display: inline-block;
    padding: 0;
    font-size: inherit;
    display: block;
  } */
  .mintui{
    font-size: 0.36rem;
  }
</style>
